<template>
	<view class="">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="参与活动" autoBack>
			</u-navbar>
		</view>

		<view class="con-body">
			<view class="uni-flex-center" style="margin-top: 15rpx;">
				<view class="main-service uni-cell-90">
					<view class="user-list">
						<view class="user-list-cell">
							<u-cell-group :border="false">
								<u-cell :border="false">
									<view slot="icon">
										<u-icon :name="item.image" width="165" height="110"></u-icon>
									</view>
									<view slot="label" style="margin-left: 15rpx;">
										<view>
											<text style="font-size: 36rpx; font-weight: 600;">{{item.title}}</text>
										</view>
										<view style="margin-top: 25rpx;">

											<text style="font-size: 32rpx; color: #666666;">{{item.address}}</text>
										</view>
										<view v-if="item.free == 0" style="margin-top: 30rpx; color: #696969;">

											<text style="font-size: 30rpx;float: left;">{{item.time}}</text>
											<text style="float: right; color: red;">免费</text>
										</view>
										<view v-else style="margin-top: 30rpx; color: #696969;">

											<text style="font-size: 30rpx;float: left;">{{item.time}}</text>
											<text style="float: right; color: red;">￥{{item.price}}/人</text>
										</view>
									</view>
								</u-cell>
							</u-cell-group>

						</view>
					</view>
				</view>
				<view class="main-service uni-cell-90" style=" width: 96%; margin-left: 2%;">
					<view class="user-list">
						<view style="padding: 5rpx 15rpx;">
							<view class="d_view">
								<text class="l_title">选择数量</text>
								<view class="d_content" style="margin-left: 70%;">
									<u-number-box v-model="num" min="0" @change="numChange" button-size="36"
										color="#0B868E" bgColor="#eeeeee" iconStyle="color: #0B868E"></u-number-box>
								</view>
							</view>
							<u-line></u-line>
							<view class="d_view">
								<text class="l_title">小计</text>
								<text class="d_content">￥{{price}}</text>
							</view>
							<u-gap height="10" bgColor="#eeeeee"></u-gap>
							<u-form-item label="联系人" prop="name" labelWidth="70" borderBottom>
								<u-input v-model="name" placeholder="请填写联系人" border="none"
									style="background-color: #FFFFFF;"></u-input>
							</u-form-item>

							<u-form-item label="联系电话" prop="tel" labelWidth="70" borderBottom>
								<u-input v-model="tel" placeholder="请填写联系电话" border="none"
									style="background-color: #FFFFFF;"></u-input>
							</u-form-item>
						</view>
					</view>
				</view>
			</view>
			<u-modal :show="showModal" title="支付提示" @confirm="confim">
				<view slot="default">
					<u-icon name="checkbox-mark" label="支付成功" labelPos="bottom" color="green" size="200rpx"></u-icon>
				</view>
			</u-modal>
			<u-toast ref="uToast" />
			<view class="uni-cell-90" style="">
				<view class="iconType2">
					<view class="text1">
						￥{{price}}
					</view>
					<view class="text2" @click="confimJoin">
						立即参加
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDetail,
		join,
		confirmJoin
	} from "@/service/communitService.js";
	export default {
		data() {
			return {
				item: {},
				price: 0.00,
				num: 0,
				name: '',
				tel: '',
				gid: 0,
				showModal: false
			}
		},
		onLoad(options) {
			this.gid = options.gid;

			getDetail({
				gid: this.gid
			}).then(this.getDetail);
		},
		methods: {
			getDetail(e) {
				if (e.code == 200) {
					this.item = e.result;
				}
			},
			numChange(e) {
				this.num = e.value;
				this.price = this.item.price * this.num;
			},
			confimJoin() {
				let par = {
					gid: this.gid,
					num: this.num,
					name: this.name,
					tel: this.tel
				}

				join(par).then(this.join)
			},
			join(e) {
				if (e.code == 200) {
					uni.showToast({
						title: e.msg,
						icon: "success"
					});
					confirmJoin({
						gid: this.gid,
						price: this.price
					}).then(this.result);
				} else {
					uni.showToast({
						title: e.msg,
						icon: "error"
					});
				}
			},
			result(e) {
				if (e.code == 200) {
					if (e.result == 'success') {
						uni.showToast({
							title: e.msg,
							icon: "success",
							complete() {
								uni.navigateBack({
									delta: 2
								})
							}
						});
					} else {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: e.result.timeStamp,
							nonceStr: e.result.nonceStr,
							package: e.result.package,
							signType: 'MD5',
							paySign: e.result.paySign,
							success: this.success,
							fail: function(err) {
								showToast(err.requestPayment);
							}
						});
					}
				} else {
					uni.showToast({
						title: e.msg,
						icon: "error"
					});
				}
			},
			success(e) {
				this.showModal = true;
			},
			confim() {
				this.showModal = false;
				uni.navigateTo({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	.l_title {
		font-size: 32rpx;
		color: #999999;
		float: left;
	}

	.d_content {
		color: #666666;
		font-size: 32rpx;
	}

	.d_view {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		text-align: right;
	}

	.iconType2 {
		position: fixed;
		bottom: 60rpx;
		display: flex;
		border: #E1E1E1 1rpx solid;
		border-radius: 40rpx;
		justify-content: space-between;
		width: 94%;
		margin-left: 3%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #FFFFFF;

		.text1 {
			color: red;
			text-align: center;
			width: 70%;
		}

		.text2 {
			color: #FFFFFF;
			text-align: center;
			width: 30%;
			background-image: url("https://s4.ax1x.com/2022/02/22/Hxz6OJ.png");
			background-size: 100% 100%;
		}
	}
</style>
